<template>
  <div>
    <zm-form :model="form" label-position="right" :rules="formRules">
      <zm-form-item label-width="120px" label="卡券赠品" prop="switch">
        <zm-switch type="date" v-model="form.isSendProgram" :disabled="isDisable" />
      </zm-form-item>
      <zm-form-item label-width="120px" label="选择卡券方案" prop="cardPlan" v-if="form.isSendProgram === '1'">
        <zm-data-radio v-model="form.cardPlan" :list="typeList" label-name="name" @change="returnedCouponTypeChange"></zm-data-radio>
      </zm-form-item>
      <zm-form-item label-width="120px" prop="types" label=" " v-if="form.isSendProgram === '1' && form.cardPlan" class="type-item">
        <zm-data-select placeholder="请选择方案" v-model="form.types" :list="typeNameList" class="w150" value-key="id" clearable @change="returnedTypeChange">
        </zm-data-select>
      </zm-form-item>
      <zm-form-item label-width="120px" label="赠送详情">
        <zm-detail-table :list="baseInfo" :info="infoData" class="db"></zm-detail-table>
      </zm-form-item>
    </zm-form>
  </div>
</template>
<script>
import ZmDetailTable from '@/components/zmDetailTable'
import { typeList, base } from '../const'
import { getProgramDetail, getProgramNameList } from '@/api/src/sendCouponSet'
import tableMixin from '@/mixins/zmTableMixin'
export default {
  name: 'SendStamps',
  components: { ZmDetailTable },
  mixins: [tableMixin],
  props: {
    rowInfo: {
      type: Object,
      required: true
    },
    rule: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      typeList,
      typeNameList: [], // 根据类型获取送券方案名称列表
      infoData: {}, // 送券配置方案详情
      loading: false,
      formRules: {
        cardPlan: [{required: true, message: '请选择卡券方案', trigger: 'change'}],
        types: [{required: true, message: '请选择方案', trigger: 'change'}]
      }
    }
  },
  computed: {
    form: {
      get () {
        return this.rule
      },
      set (val) {

      }
    },
    isDisable () {
      return !['1', '2', '3'].includes(this.rowInfo.type.toString())
    },
    baseInfo () {
      return base(this)
    }
  },
  mounted () {
    this.rule.id && this.init()
  },
  methods: {
    async init () {
      this.typeNameList = await getProgramNameList({ type: this.form.cardPlan })
      this.infoData = await getProgramDetail({ id: this.form.types })
    },
    async returnedCouponTypeChange () {
      this.typeNameList = []
      this.infoData = {}
      this.form.types = ''
      this.typeNameList = await getProgramNameList({ type: this.form.cardPlan })
      this.returnedTypeChange(this.form.types)
    },
    async returnedTypeChange () {
      if (!this.form.types) {
        return
      }
      this.infoData = await getProgramDetail({ id: this.form.types })
      this.$emit('selectId', this.form.types)
    }
  }
}
</script>
<style lang="scss" scoped>
.type-item{
  /deep/.el-form-item__label:before{
  content: ''!important;
}
}

</style>
